<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生选课</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./js/jquery-3.6.0.js"></script>
</head>
<body>
<div style="padding: 20px;">
    <fieldset class="layui-elem-field">
        <legend>当前学生信息</legend>
        <div class="layui-field-box">
            学号: <span id="studentId"></span>
            专业: <span id="major"></span>
            年级: <span id="grade"></span>
        </div>
    </fieldset>

    <table class="layui-hide" id="courseTable" lay-filter="courseTable"></table>

    <div style="margin-top: 20px;">
        <button class="layui-btn" id="submitCourses">提交选课</button>
        <span style="margin-left: 20px;">当前已选学分: <span id="totalCredits">0</span></span>
    </div>
</div>

<script>
    layui.use(['table', 'layer'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;

        // 从URL获取参数
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }

        var studentId = getQueryVariable('stuId');
        var major = decodeURIComponent(getQueryVariable('major'));
        var grade = decodeURIComponent(getQueryVariable('grade'));

        $('#studentId').text(studentId);
        $('#major').text(major);
        $('#grade').text(grade);

        // 渲染课程表格
        table.render({
            elem: '#courseTable',
            url: '/api/courses/selectable?major=' + major + '&grade=' + grade,
            cols: [[
                {type: 'checkbox'},
                {field: 'courseId', title: '课程ID', sort: true},
                {field: 'courseName', title: '课程名称'},
                {field: 'score', title: '学分'},
            ]]
        });

        // 监听复选框事件
        table.on('checkbox(courseTable)', function(obj){
            var checkStatus = table.checkStatus('courseTable');
            var data = checkStatus.data;
            var totalCredits = 0;
            data.forEach(function(item) {
                totalCredits += parseInt(item.score);
            });
            $('#totalCredits').text(totalCredits);
        });

        // 提交选课
        $('#submitCourses').on('click', function(){
            var checkStatus = table.checkStatus('courseTable');
            var data = checkStatus.data;
            var totalCredits = 0;
            var courseIds = data.map(function(item){
                totalCredits += parseInt(item.score);
                return item.courseId;
            });

            if (totalCredits < 20) {
                layer.msg('所选课程总学分不能少于20分', {icon: 5});
                return;
            }

            if (courseIds.length === 0) {
                layer.msg('请至少选择一门课程', {icon: 5});
                return;
            }

            $.ajax({
                url: '/api/student/' + studentId + '/courses',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    courseIds: courseIds,
                    semester: decodeURIComponent(getQueryVariable('grade')) // 这里可以动态生成
                }),
                success: function() {
                    layer.msg('选课成功', {icon: 1}, function(){
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        // parent.location.reload(); // 可以选择刷新父页面
                    });
                },
                error: function() {
                    layer.msg('选课失败', {icon: 2});
                }
            });
        });
    });
</script>
</body>
</html>
